<!DOCTYPE html>
<html lang="en">
<script src="../ext_js/jquery-1.4.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="./progress.css">
<script>
$(function(){
var progress = function (el, val, max) {
    var duration = 400;
    var span = $(el).find("span");
    var b = $(el).find("b");
    var w = Math.round((val / max) * 100);
    $(b).fadeOut('fast');
    $(span).animate({
        width: w + '%'
    }, duration, function () {
        $(el).attr("value", val);
        $(b).text(w + '%').fadeIn('fast');
    });
}
progress("#progress1", 20, 100);
progress("#progress2", 50, 100);
progress("#progress3", 100, 100);
})
</script>
<body>
	<div id="progress1" class="progress width2 progress-red"><span><b></b></span></div>
	<div id="progress2" class="progress width2 progress-blue"><span><b></b></span></div>
	<div id="progress3" class="progress width2 progress-green"><span><b></b></span></div>
</body>
</html>